import React, { useState } from "react";
//上下文对象,组件懒加载 手写
const Son = ({ data }) => {
  //   const [two]
  const [A, setA] = useState("");
  const [B, setB] = useState("");
  const [C, setC] = useState("");
  const getOne = ({ target }) => {
    // console.log(target.children);
    eval(`set${target.name}`)(target.value);
  };
  const getA = ({ target }) => {
    console.log(target);
  };
  return (
    <label htmlFor="">
      <span>选择省市：</span>
      <select name="A" value={A} onChange={getOne}>
        <option value="">--请选择--</option>
        {data.map((item, index) => {
          return (
            <option key={item.label} onChange={getA}>
              {item.value}
            </option>
          );
        })}
      </select>
      <select name="B" value={B} onChange={getOne}>
        <option value="">--请选择--</option>
        {data
          .find((item) => item.value === A)
          ?.children.map((item) => {
            return (
              <option value={item.value} key={item.label}>
                {item.label}
              </option>
            );
          })}
      </select>
      <select name="C" value={C} onChange={getOne}>
        <option value="">--请选择--</option>
        {data
          .find((item) => item.value === A)
          ?.children.find((item) => item.value === B)
          ?.children.map((item) => {
            return (
              <option value={item.value} key={item.label}>
                {item.label}
              </option>
            );
          })}
      </select>
      <span>
        <i>*</i>
        请选择收货省市信息.
      </span>
    </label>
  );
};
export default Son;
